<template>
  <view class="container">

    <z-paging class="container" ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <div>
          <view style="
        display: flex;
        justify-content: center;
        background-color: #3f83cc;
        align-items: center;
      ">
            <view :class="{
              login_title: true,
              login_title_active: active == 0,
            }" @click="switchTab(0)">全部</view>
            <view :class="{
              login_title: true,
              login_title_active: active == 1,
            }" @click="switchTab(1)">手动退款</view>
            <view :class="{
              login_title: true,
              login_title_active: active == 2,
            }" @click="switchTab(2)">自动退款</view>

            <view :class="{
              login_title: true,
              login_title_active: active == 3,
            }" @click="switchTab(3)">未退</view>
          </view>


          <div style="margin-top: 24rpx;margin-left: 12rpx; margin-right: 12rpx;">
            <u-search placeholder="搜索手机号、设备号" bgColor="#FFFFFF" v-model="keyword" @search="searchFn"></u-search>
          </div>
        </div>

      </template>
      <view v-for="(order, index) in dataList" :key="index"
        style="margin-top: 30rpx; padding: 30rpx; background-color: #ffffff" @click="goToDetail(order)">
        <div class="title_title" v-if="order.status == 3">已完成</div>
        <div class="title_title" style="color: #FF4848;" v-else>已超时</div>

        <div class="flex">
          <div class="text">
            {{ order.department.deptname || "位置未定位"
            }}{{ order.department.floor ? `${order.department.floor}楼` : "" }}
            {{ order.equipment.position || "" }}
          </div>
          {{ order.user.mobile }}
          <div>按时</div>
        </div>


        <div class="flex">
          <div>设备号：{{ order.equipment.device_id }}</div>
          <div>完成：{{ (order.returntime_text) }}</div>
        </div>



        <div class="flex">
          <div class="text" style="color: goldenrod">付款金额: {{ order.money }}</div>
          <div class="text" style="color: #FF4848">退款金额: {{ order.money * 1 - order.rent_money * 1 }}</div>
        </div>


      </view>
    </z-paging>




  </view>
</template>

<script>
import navbarMixin from "@/common/mixin/navbar.js";
import { getRefundOrder } from '@/api/index.js'
import dayjs from "dayjs";
export default {
  mixins: [navbarMixin],

  data() {
    return {
      active: 0,
      dataList: [],
      keyword: "",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) { },
  onShow() { 
    console.log("onShow",)
     this.$refs.paging.reload();
  },

  methods: {
    timeLabel(timer) {
      return dayjs(timer * 1000).format("YYYY-MM-DD HH:mm:ss");
    },
    switchTab(index) {
      this.active = index;
      this.$refs.paging.reload();
    },
    async searchFn(keyword) {
      this.$refs.paging.reload();
    },

    queryList(pageNo, pageSize) {
      const app = this;

      let status = "";



      // 此处请求仅为演示，请替换为自己项目中的请求
      getRefundOrder({
        status: app.active,
        page: pageNo, limit: pageSize,
        keyword: app.keyword,
        hospital_id: uni.getStorageSync("curHospital"),
      }).then(res => {

        console.log("resresres", res)
        // app.total = res.total;

        // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
        app.$refs.paging.complete(res.list);
      }).catch(res => {
        console.log('res', res);

        // 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
        // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
        // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
        app.$refs.paging.complete(false);
      })
    },
    click(item) {
      console.log("item", item);
    },

    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    goToDetail(data) {
      uni.navigateTo({
        url: "/pages/adminPage/orderStatus/detail" + "?sn=" + data.sn + "&type=" + "refund",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #ebebeb;
}

.login_title {
  width: 33%;
  display: flex;
  justify-content: center;
  padding-top: 28rpx;
  padding-bottom: 28rpx;

  color: rgba(251, 251, 251, 1);
  font-size: 36rpx;
  text-align: left;
  font-family: PingFangSC-regular;
  align-items: center;
}

.login_title_active {
  width: 216rpx;
  height: 66rpx;
  line-height: 46rpx;
  border-radius: 34rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(101, 175, 80, 1);
  font-size: 32rpx;
  text-align: center;
  font-family: PingFangSC-bold;
}

.title_title {
  color: rgba(114, 182, 95, 1);
  font-size: 40rpx;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26rpx;
}

.text {
  height: 46rpx;
  line-height: 46rpx;
  color: rgba(0, 0, 0, 1);
  font-size: 32rpx;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
</style>
